<script setup lang="ts">
defineOptions({
  name: "infoConfirm"
});

import { ref, reactive, computed, onMounted } from "vue";
import type { FormInstance, FormRules } from "px-ui";
import { useRoute } from "vue-router";
import checkListTitle from "./checkListTitle.vue";
import { getFillingWagonMaterialOptions } from "@/api/modules/operation";

const route = useRoute();

let defaultParams = {};

interface Props {
  data: Record<string, any> | null;
  disabled?: boolean;
  onlyList?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  data: null,
  disabled: false,
  onlyList: false
});

const infoConfirmRef = ref<FormInstance>();
const materialOptions = ref<Array<any>>([]);

interface FormType {
  transportDate: string;
  material: string;
  capacity: string;
  supplier: string;
  tankTruckNo: string;
  driverName: string;
  chemicalProperty: string;
  lotNumber: string; /////
  line: string;
  dutyEngineer: string;
  supplierEngineer: string;
}
const infoConfirmForm = reactive<FormType>({
  transportDate: "",
  material: "",
  capacity: "",
  supplier: "",
  tankTruckNo: "",
  driverName: "",
  chemicalProperty: "",
  lotNumber: "", /////
  line: "",
  dutyEngineer: "",
  supplierEngineer: ""
});
const infoConfirmRules = reactive<FormRules<FormType>>({
  transportDate: [{ required: true, message: "请选择载送日期", trigger: ["blur"] }],
  material: [{ required: true, message: "请选择载送物质", trigger: ["blur"] }],
  capacity: [{ required: true, message: "请输入载送数量", trigger: ["blur"] }],
  supplier: [{ required: true, message: "请输入供应厂商", trigger: ["blur"] }],
  tankTruckNo: [{ required: true, message: "请输入槽车车号", trigger: ["blur"] }],
  driverName: [{ required: true, message: "请输入司机姓名", trigger: ["blur"] }],
  chemicalProperty: [{ required: true, message: "请输入化学特性", trigger: ["blur"] }],
  lotNumber: [{ required: true, message: "请输入LOT ID", trigger: ["blur"] }], /////
  line: [{ required: false, message: "请输入LINE", trigger: ["blur"] }],
  dutyEngineer: [{ required: true, message: "请输入值班工程师", trigger: ["blur"] }],
  supplierEngineer: [{ required: true, message: "请输入厂商操作员", trigger: ["blur"] }]
});

const collapseValue = ref<Array<string>>(["信息确认"]);
const collapseTitle = ref<string>("信息确认");
const realDisabled = computed(() => props.disabled);

const validate = async () => {
  if (!infoConfirmRef.value) return null;
  await infoConfirmRef.value?.validate();
  return getParams();
};

const getParams = () => {
  return { ...defaultParams, ...infoConfirmForm };
};

const initOptions = async () => {
  const res = await getFillingWagonMaterialOptions();
  materialOptions.value = res?.map(({ code: value = "", name: label = "" }) => ({ value, label }));
};

const init = () => {
  if (props.data) {
    defaultParams = { ...defaultParams, ...props.data };
  } else {
    return;
  }
  const {
    transportDate = "",
    material = "",
    capacity = "",
    supplier = "",
    tankTruckNo = "",
    driverName = "",
    chemicalProperty = "",
    lotNumber = "", /////
    line = "",
    dutyEngineer = "",
    supplierEngineer = ""
  } = props.data;
  infoConfirmForm.transportDate = transportDate;
  infoConfirmForm.material = material;
  infoConfirmForm.capacity = capacity;
  infoConfirmForm.supplier = supplier;
  infoConfirmForm.tankTruckNo = tankTruckNo;
  infoConfirmForm.driverName = driverName;
  infoConfirmForm.chemicalProperty = chemicalProperty;
  infoConfirmForm.lotNumber = lotNumber;
  infoConfirmForm.line = line;
  infoConfirmForm.dutyEngineer = dutyEngineer;
  infoConfirmForm.supplierEngineer = supplierEngineer;
};

onMounted(async () => {
  await initOptions();
  init();
});

defineExpose({
  validate,
  getParams
});
</script>

<template>
  <px-collapse v-model="collapseValue">
    <px-collapse-item :name="collapseTitle">
      <template #title>
        <checkListTitle :title="collapseTitle" :noIndex="!!route.query.type" />
      </template>
      <div class="collapse-content-form">
        <px-form
          ref="infoConfirmRef"
          inline
          label-width="120px"
          :model="infoConfirmForm"
          :rules="infoConfirmRules"
          :disabled="realDisabled"
          scroll-to-error
          :scroll-into-view-options="{ behavior: 'smooth' }"
        >
          <px-row :gutter="32">
            <px-col :span="8">
              <px-form-item label="载送物质" prop="material">
                <px-select v-model="infoConfirmForm.material" clearable filterable placeholder="请选择载送物质">
                  <px-option v-for="item in materialOptions" :key="item.value" :label="item.label" :value="item.value" />
                </px-select>
              </px-form-item>
            </px-col>

            <px-col :span="8">
              <px-form-item label="载送数量" prop="capacity">
                <px-input
                  v-model.trim.number="infoConfirmForm.capacity"
                  class="px-input-number-no-controls"
                  type="number"
                  clearable
                  :min="0"
                  placeholder="请输入载送数量"
                />
              </px-form-item>
            </px-col>

            <px-col :span="8">
              <px-form-item label="载送日期" prop="transportDate">
                <px-date-picker
                  v-model="infoConfirmForm.transportDate"
                  clearable
                  type="date"
                  :editable="false"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :default-time="new Date(2000, 1, 1)"
                  placeholder="请选择载送日期"
                />
              </px-form-item>
            </px-col>

            <px-col :span="8">
              <px-form-item label="供应厂商" prop="supplier">
                <px-input v-model.trim="infoConfirmForm.supplier" clearable placeholder="请输入供应厂商" />
              </px-form-item>
            </px-col>

            <px-col :span="8">
              <px-form-item label="槽车车号" prop="tankTruckNo">
                <px-input v-model.trim="infoConfirmForm.tankTruckNo" clearable placeholder="请输入槽车车号" />
              </px-form-item>
            </px-col>

            <px-col :span="8">
              <px-form-item label="司机姓名" prop="driverName">
                <px-input v-model.trim="infoConfirmForm.driverName" clearable placeholder="请输入司机姓名" />
              </px-form-item>
            </px-col>

            <px-col :span="8">
              <px-form-item label="化学特性" prop="chemicalProperty">
                <px-input v-model.trim="infoConfirmForm.chemicalProperty" clearable placeholder="请输入化学特性" />
              </px-form-item>
            </px-col>

            <px-col :span="8">
              <px-form-item label="LOT ID" prop="lotNumber">
                <px-input v-model.trim="infoConfirmForm.lotNumber" clearable placeholder="请输入LOT ID" />
              </px-form-item>
            </px-col>

            <px-col :span="8">
              <px-form-item label="LINE" prop="line">
                <px-input v-model.trim="infoConfirmForm.line" clearable placeholder="请输入LINE" />
              </px-form-item>
            </px-col>

            <px-col :span="8">
              <px-form-item label="值班工程师" prop="dutyEngineer">
                <px-input v-model.trim="infoConfirmForm.dutyEngineer" clearable placeholder="请输入值班工程师" />
              </px-form-item>
            </px-col>
            <px-col :span="8">
              <px-form-item label="厂商操作员" prop="supplierEngineer">
                <px-input v-model.trim="infoConfirmForm.supplierEngineer" clearable placeholder="请输入厂商操作员" />
              </px-form-item>
            </px-col>
          </px-row>
        </px-form>
      </div>
    </px-collapse-item>
  </px-collapse>
</template>

<style lang="scss" scoped>
.px-collapse {
  margin-bottom: 16px;
  overflow: hidden;
  border-right: 1px solid var(--px-collapse-border-color);
  border-left: 1px solid var(--px-collapse-border-color);
  border-radius: 6px;

  :deep(.px-collapse-item) {
    > div {
      padding: 0 16px;

      &:nth-child(1) {
        background-color: rgb(248 248 248);
        border-bottom: 1px solid var(--px-collapse-border-color);

        .px-collapse-item__header {
          background-color: rgb(248 248 248);
          border-bottom: none;
        }
      }

      &:nth-child(2) {
        padding: 16px;
      }
    }

    .px-collapse-item__content {
      padding-bottom: 0;
    }

    .px-form-item {
      width: 100%;

      .px-form-item__content {
        .px-input-number .px-input__inner {
          text-align: left;
        }

        .px-input,
        .px-select,
        .px-input-number {
          width: 100%;
        }
      }
    }
  }
}
</style>
